<template>
  <div>
    <img src="@/assets/images/9.jpg" alt="" />
    <div style="position: relative">
      <img src="@/assets/images/10.jpg" alt="" />
      <div class="boxA" @click="modalA = true"></div>
      <div class="boxB" @click="modalB = true"></div>
      <div class="boxC" @click="modalC = true"></div>
      <div class="boxD" @click="modalD = true"></div>
    </div>
    <at-modal v-model="modalA" title="语音接入">
      <p>是否语音接入?</p>
    </at-modal>
    <at-modal v-model="modalB" title="Web云客服">
      <p>客服接入中...</p>
    </at-modal>
    <at-modal v-model="modalC" title="云客服微信" class="center">
      <img
        src="@/assets/images/code.png"
        alt=""
        style="width: 200px; margin: auto"
      />
    </at-modal>
    <at-modal v-model="modalD" title="云客服App">
      <el-button type="text">跳转App商店（下载App）</el-button>
    </at-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modalA: false,
      modalB: false,
      modalC: false,
      modalD: false
    }
  },

  created() {
    console.log(window.location.href)
  }
}
</script>

<style lang="scss" scoped>
img {
  width: 100%;
  margin-bottom: -20px;
}
.boxA {
  width: 20vw;
  height: 200px;
  cursor: pointer;
  position: absolute;
  left: 19vw;
  top: 21vh;
}
.boxB {
  width: 20vw;
  height: 200px;
  cursor: pointer;
  position: absolute;
  right: 19vw;
  top: 21vh;
}
.boxC {
  width: 20vw;
  height: 200px;
  cursor: pointer;
  position: absolute;
  left: 19vw;
  top: 57vh;
}
.boxD {
  width: 20vw;
  height: 200px;
  cursor: pointer;
  position: absolute;
  right: 19vw;
  top: 57vh;
}
/deep/.at-modal__body {
  text-align: center;
}
</style>
